<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<!-- css样式-->
		<link rel="stylesheet" href="layui/css/layui.css" />
		<!-- js文件-->
		<script type="text/javascript" src="layui/layui.all.js"></script>
		<!-- <script type="text/javascript" src="layui/layui.js"></script> -->

	</head>
	<body>

		<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
		        <div carousel-item>
		            <div style="background-color:red">条目1</div>
		            <div style="background-color:green">条目2</div>
		            <div style="background-color:blue">条目3</div>
		            <div style="background-color:mediumorchid">条目4</div>
		            <div style="background-color:orange">条目5</div>
		        </div>

		    </div>
		    <!-- 条目中可以是任意内容，如：<img src=""> -->
		    <script>
		        layui.use('carousel', function () {
		            var carousel = layui.carousel;
		            //***************************建造实例
		            var ins=carousel.render({
		                elem: '#test1'
		                , width: '600px'     //设置容器宽度
		                , arrow: 'always'    //始终显示箭头，可选hover,none
		                //,anim: 'updown'    //切换动画方式，可选fade,default
		                , full: false        //全屏
		                , autoplay: true     //自动切换
		                , interval: 1000     //自动切换的时间间隔
		                , index: 3           //初始化时item索引,默认时0
		                , indicator:'inside' //指示器位置，可选outside,none
		            });
		
		            //**************************监听轮播切换事件
		            carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
		                console.log(obj.index);     //当前条目的索引
		                console.log(obj.prevIndex); //上一个条目的索引
		                console.log(obj.item);      //当前条目的元素对象
		            });
		
		            //****************************重置轮播
		            //var ins = carousel.render(options);
		            ins.reload({arrow:'hover'});//将arror从alway变成hover
		        });
		    </script>

	</body>
</html>
